<template>
    <div>
        查看
        <el-date-picker
                v-model="date"
                align="right"
                type="date"
                @change="changeDate"
                placeholder="选择日期"
                :picker-options="pickerOptions">
        </el-date-picker>
        的日记
        <el-input
                placeholder="请输入搜索关键字"
                prefix-icon="el-icon-search"
                style="width: 250px;margin-left: 100px"
                clearable
                v-model="searchKey">
        </el-input>
        <el-button style="margin-left: 15px" type="primary" @click="search">搜索</el-button>
        <!-- 数据 -->
        <el-table :data="diaries" class="tableDate">
            <el-table-column prop="date" label="日期" width="150">
            </el-table-column>
            <el-table-column prop="title" label="标题" width="250">
            </el-table-column>
            <el-table-column show-tooltip-when-overflow prop="content" label="内容" width="500">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button @click="view(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.row)" type="text" style="color: red" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 6px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </div>
        <!-- view弹窗 -->
        <el-dialog title="详情信息" :visible.sync="dialogFormVisible_view">
            <el-form :model="showDiary">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="showDiary.date" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="showDiary.title" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input type="textarea" readonly :autosize="{ minRows: 6, maxRows: 10}"
                              v-model="showDiary.content" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible_view = false">确 定</el-button>
            </div>
        </el-dialog>
        <!-- edit弹窗 -->
        <el-dialog title="修改日记" :visible.sync="dialogFormVisible_edit">
            <el-form :model="showDiary">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="showDiary.date" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="showDiary.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10}" v-model="showDiary.content"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button plain @click="dialogFormVisible_edit = false">取消</el-button>
                <el-button type="primary" plain @click="update">确定修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "tableData",
        props: {
            id: String,
            tokenId: String
        },
        data() {
            const item = {
                date: '2016-05-02',
                title: 'title',
                content: '的了看阿萨德将卢卡斯和可及我的content.....'
            };
            return {
                dialogFormVisible_view: false,
                dialogFormVisible_edit: false,
                showDiary: {},
                formLabelWidth: '120px',
                diaries: [],
                date: '',  //显示日期
                searchKey: '', //搜索关键字
                currentPage: 1,  //当前页数
                pageSize: 10,  //每页显示的条数
                total: 0,  //数据总条数
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            // 选择日期
            changeDate(e) {
                // this.getDataById(this.id)
                this.getDataById(this.tokenId)
            },
            //获取该id的数据
            getDataById(id) {
                // let date = new Date(this.date);
                let date = this.date ? new Date(this.date) : '';
                let dateStr = date ? date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() : ''
                this.$http.post("/diary/conditionQuery/" + id + '/' + sessionStorage.getItem('token'), {
                    searchKey: this.searchKey,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    date: dateStr
                }).then(res => {
                    console.log(res.data)
                    this.diaries = res.data.data.rows
                    this.total = res.data.data.total
                }).catch(res => {
                    console.log("请求失败...")
                })
            },
            search() {
                // 搜索时自动跳到第一页
                this.currentPage = 1
                // this.getDataById(this.id)
                this.getDataById(this.tokenId)
            },
            handleCurrentChange(currentPage) {
                // console.log(currentPage)
                this.currentPage = currentPage
                // this.getDataById(this.id)
                this.getDataById(this.tokenId)
            },
            view(row) {
                this.dialogFormVisible_view = true
                this.showDiary = row
            },
            edit(row) {
                this.dialogFormVisible_edit = true
                this.showDiary = row
            },
            deleteDiary(diaryId) {
                this.$http.delete("/diary/" + diaryId + '/' + sessionStorage.getItem('token')
                ).then(res => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                        this.getDataById(this.tokenId)   //刷新页面数据
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(res => {
                    alert('删除失败!' + res.data)
                })
            },
            del(row) {
                this.$confirm('此操作将永久删除这篇日记, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteDiary(row.id)
                }).catch(() => {

                })
            },
            update() {
                this.dialogFormVisible_edit = false
                this.$http.put('/diary/' + sessionStorage.getItem('token'),
                    JSON.stringify(this.showDiary)
                ).then(res => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(res => {
                    alert(res.data)
                })
            }
        },
        created() {
            // this.id = this.$route.path.substring(1)  //  /{id} 变为 {id}
            // this.getDataById(this.id)
            this.getDataById(this.tokenId)
        }
    }
</script>

<style scoped>
    .tableDate {
        padding: 0 100px 0 100px;
        margin-top: 20px;
    }
</style>
